<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>展厅打卡</title>
    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <script src="../js/vue.js"></script>
  </head>

  <body>
    <script src="../js/rem.js"></script>
    <div id="app">
      <img src="../image/bj3.png" alt="" class="beijing" />
      <!-- 展厅地图预留 -->
      <div class="map">
        <div class="map-container">
          <div
            class="giftBtn"
            v-for="(item,i) in list"
            :key="i"
            @click="punchHandle(i)"
            :style="{top:item.top + 'px',left:item.left + 'px'}"
          ></div>
        </div>
      </div>
      <div class="btn-box">
        <!-- 领取礼物1 -->
        <img
          src="../image/lingqu2.png"
          alt=""
          class="getGift"
          v-show="punchIdList.length >= 5"
          @click="btnClick('getGift')"
        />
        <!-- 领取礼物2 -->
        <img
          src="../image/lingqu1.png"
          alt=""
          class="getGift"
          v-show="punchIdList.length < 5"
        />
        <!-- 答题1 -->
        <img
          src="../image/dati2.png"
          alt=""
          class="getGift"
          v-show="punchIdList.length >= 5"
          @click="btnClick('answer')"
        />
        <!-- 答题2 -->
        <img
          src="../image/dati1.png"
          alt=""
          class="getGift"
          v-show="punchIdList.length < 5"
        />
      </div>

      <!-- 礼品弹窗 -->
      <div :class="['main']" v-if="isShow">
        <div class="img-box">
          <img
            :src="`../image/giftGet${isActive ? '2' : '1'}.png`"
            alt=""
            class="img-box_gift"
          />
          <img
            src="../image/delete-icon.png"
            alt=""
            class="img-box_delete"
            @click="close"
          />
          <!-- 酒礼品展示预留 -->
          <div class="alcohol-type"></div>
        </div>
      </div>
    </div>

    <script>
      var app = new Vue({
        el: '#app',
        data: {
          isShow: false,
          isActive: false,
          punchIdList: []
        },
        created() {
          console.log('created')
          // const punchIdList = window.sessionStorage.getItem('punchIdList')
          // if(punchIdList && punchIdList.length > 0){
          //     this.punchIdList = punchIdList
          // }
        },
        methods: {
          btnClick(type) {
            // window.sessionStorage.setItem('punchIdList',this.punchIdList)
            window.open(`/src/components/${type}/index.html`, '_self')
          },
          close() {
            this.isShow = false
          },
          punchHandle(i) {
            const flag = false //控制展示弹窗类型 false为未打卡弹窗，true为打卡弹窗
            if (flag) {
              this.isActive = true
            } else {
              this.isActive = false
              this.punchIdList.push(i)
            }
            this.isShow = true
          }
        },
        computed: {
          list() {
            const arr = [...new Array(10)]
            return arr.map((v, i) => {
              return {
                top: 120 * i + 140,
                left: i % 2 === 0 ? 150 : 600
              }
            })
          }
        }
      })
    </script>
  </body>
</html>
